<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" :model="form" label-width="130px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="预约单号">
                            <el-input v-model="form.orderSn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input v-model="form.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号">
                            <el-input v-model="form.userPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预约医院">
                            <el-select placeholder="请选择" v-model="form.hospitalId">
                                <el-option
                                    v-for="item in officeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目名称">
                            <el-input v-model="form.projectName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目分类" prop="cates">
                            <el-cascader
                                placeholder="请选择" 
                                v-model="cates"
                                :options="cateOption"
                                change-on-select
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预约状态">
                            <el-select placeholder="请选择" v-model="form.orderStatus">
                                <el-option
                                    v-for="item in orderStaOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预约来源">
                            <el-select placeholder="请选择" v-model="form.type">
                                <el-option
                                    v-for="item in typeOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预约时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="orderDate"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提交时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="createDate"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="orderSn"
                    label="预约单号"
                >
                </el-table-column>
                <el-table-column
                    prop="userName"
                    label="预约姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="userPhone"
                    label="预约手机号"
                >
                </el-table-column>
                <el-table-column
                    label="预约状态"
                >
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.orderStatus | orderStatusType}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="orderDate"
                    label="预约日期"
                >
                </el-table-column>
                <el-table-column
                    prop="hospitalName"
                    label="预约医院"
                >
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="预约项目"
                >
                </el-table-column>
                <el-table-column
                  
                    label="项目分类"
                >
                </el-table-column>
                <el-table-column
                    label="预约来源"
                >
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type | orderType}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="预约单类型"
                >
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.projectType | orderProjectType}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="支付状态"
                >
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.payStatus | orderPayStatus}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="appointmentPrice"
                    label="预约价"
                >
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="180"
                >
                    <template slot-scope="scope">
                        <el-button type="text" @click="closeMake(scope.row.id)" size="small">关闭预约</el-button>
                        <el-button type="text" @click="toRoutes('subManageEdit',scope.row.orderSn)" size="small">编辑</el-button>
                        <el-button type="text" @click="toRoutes('subManageInfo',scope.row.orderSn)" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 关闭预约 -->
            <el-dialog
                title="关闭预约"
                :visible.sync="dialogVisible"
                :before-close="handleClose"
                width="468px">
                <!-- 输入框 -->
                <el-form :inline="true"
                label-width="80px"
                label-position="right"
                >
                    <el-col :span="24">
                        <el-form-item label="咨询结果">
                            <el-select placeholder="请选择" v-model="val">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input
                                class="textarea236"
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose()">取 消</el-button>
                    <el-button type="primary" @click="addSubmit()">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { findProjectOrderList} from '@/api/subscribeManage'
    import { hospitalDropDown } from '@/api/doctorManage'
    import {findAllBeautyCategoryList} from '@/api/medicalClassifyList'
    export default {
        name:"subManageIndex",
        data() {
            return {
                officeOption:[],
                orderStaOption:[],
                typeOption:[],
                val:"1",
                dialogVisible:false,
                tableLoading:true,
                dates:[],
                orderDate:null,
                createDate:null,
                cates:null,
                form: {
                    orderSn: '',
                    userName: '',
                    userPhone: '',
                    hospitalId: '',
                    projectName:'',
                    orderStatus:'',
                    type:'',
                    beginCreateDate:'',
                    endCreateDate:'',
                    beginOrderDate:'',
                    endOrderDate:'',
                    cate:'',
                    pageNum:1,
                    pageSize:10,
                },
                tableData: [],
                page_sizes:[10,30,50,100],
                page_totals:0,
                listForm:{
                    pageNum:1,
                    pageSize:10,
                },
                cateOption:[{
                        value: 0,
                        label: '医美'
                    }, {
                        value: 1,
                        label: '口腔管理'
                    }, {
                        value: 2,
                        label: '健康管理'
                }],
            }
        },
        filters:{
            cardType(e){
                return window.helper.cardType(String(e))
            },
            orderProjectType(e){
                return window.helper.orderProjectType(String(e))
            },
            orderPayStatus(e){
                return window.helper.orderPayStatus(String(e))
            },
            orderStatusType(e){
                return window.helper.orderStatusType(String(e))
            },
            orderType(e){
                return window.helper.orderType(String(e))
            }
        },
        mounted(){
            this.getList(this.listForm)
            // 获取对应的options
            this.getOption()
            // 获取对应分类
            if(this.cateFn('0')!=[]){
                this.cateOption[0]["children"] = this.cateFn('0')
            }
            if(this.cateFn('1')!=[]){
                this.cateOption[1]["children"] = this.cateFn('1')
            }
            if(this.cateFn('2')!=[]){
                this.cateOption[2]["children"] = this.cateFn('2')
            }
        },
        methods: {
            //获取分类
            cateFn(e){
                let datas = {
                    plate:e
                }
                let newArr=[]
                findAllBeautyCategoryList(datas).then(res=>{
                    // console.log(res)
                    let resData = res.data.data.list
                    if(resData!=[]){
                        resData.forEach((item1,index) => {
                            newArr.push({
                                value: item1.id,
                                label: item1.name,
                            })
                            if(item1.children!=null){
                                newArr[index]["children"] = []
                                item1.children.forEach((item2,i) => {
                                    newArr[index]["children"].push({
                                        value: item2.id,
                                        label: item2.name,
                                    })
                                    if(item2.children!=null){
                                        newArr[index]["children"][i]["children"] = []
                                        item2.children.forEach((item3) => {
                                            newArr[index]["children"][i]["children"].push({
                                                value: item3.id,
                                                label: item3.name,
                                            })
                                        })
                                    }
                                })
                            } 
                        })
                    }
                })
                return newArr
            },
            getOption(){
                // 医院列表
                hospitalDropDown().then(res=>{
                    let resData = res.data.data
                    let newData = [];
                    resData.forEach(e => {
                        newData.push({
                            value:e.id+"",
                            label:e.name
                        })
                    });
                    this.officeOption = newData
                    // console.log(this.officeOption)
                })
                //获取预约状态
                this.orderStaOption = window.helper.orderStatusType('listReturn')
                // 预约来源
                this.typeOption = window.helper.orderType('listReturn')
            },
            //成功状态弹窗
            succStatus(txt){
                this.$message({
                    message: txt+'成功',
                    type: 'success'
                });
            },
            //失败状态弹窗
            errorStatus(txt){
                this.$message.error(txt+'失败');
            },
            //列表数据获取
            getList(e){
                this.tableLoading = true
                let datas = e
                findProjectOrderList(datas).then(res => {
                    // console.log(res)
                    if(!res.data.code){
                        // console.log(res)
                        this.tableData = res.data.data.list
                        this.page_totals = res.data.data.count
                    }else{
                        this.$message.error("数据接口访问失败");
                    }
                    this.tableLoading = false
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            },
            // 查询
            searchFn() {
                this.form.orderStatus = String(this.form.orderStatus)
                this.form.type = String(this.form.type)
                if(this.cates.length>0){
                    this.form.cate = String(this.cates[this.cates.length-1])
                }
                if(this.orderDate!=null){
                    if(this.orderDate.length){
                        this.form.beginOrderDate = this.orderDate[0];
                        this.form.endOrderDate = this.orderDate[1];
                        this.getList(this.form)
                    }else{
                        this.getList(this.form)
                    }
                }else{
                    this.form.beginOrderDate = "";
                    this.form.endOrderDate = "";
                }
                if(this.createDate!=null){
                    if(this.createDate.length){
                        this.form.beginCreateDate = this.createDate[0];
                        this.form.endCreateDate = this.createDate[1];
                        this.getList(this.form)
                    }else{
                        this.getList(this.form)
                    }
                }else{
                    this.form.beginCreateDate = "";
                    this.form.endCreateDate = "";
                }
                console.log(JSON.stringify(this.form))
                console.log(this.form)
            },
            //账号状态修改
            swithFn(userId,status){
                let datas = {userId,status}
                updateStatus(datas).then(res => {
                    if(!res.data.code){
                        this.succStatus("修改")
                        this.getList(this.listForm)
                    }else{
                        this.$message.error("数据接口访问失败");
                    }
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            },
            //关闭弹窗
            handleClose(){
                this.dialogVisible = false
                // this.$refs["addForm1"].resetFields();
            },
            addSubmit(){
                console.log("提交了")
                this.dialogVisible = false
            },
            closeMake(e){
                console.log(e)
                this.dialogVisible = true
            },
            // 路由跳转
            toRoutes(e,userId) {
                let route = {name:e,query:{userId:userId}}
                this.$router.push(route)
            },
            //改变页面条数
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList(this.form)
            },
            //选择页数
            handleCurrentChange(val) {
                this.form.pageNum = val
                this.getList(this.form)
            }
        }
    }
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner{width: 236px}
</style>
